<template>
  <div>
    <img
      style="width: 100%; heght: 300px"
      src="../../assets/images/ditu.png"
      alt=""
    />
    <span class="boton1" @click="returnTap">取消</span>
    <van-button class="boton2" size="small" type="primary">发送</van-button>
    <div class="input">
      <van-icon v-if="search == ''" class="input_icon" name="search" />
      <input
        type="text"
        class="inputAl"
        v-model="search"
        placeholder="搜索"
      />
    </div>
    <div class="list">
      <div class="listLeft">
          <span>彩虹大道</span>
          <span style="color:#888888;margin-top:5px">100米内中欧冠南山发</span>
      </div>
      <van-icon class="listIcon" name="success" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        search:""
    };
  },
  methods: {
    returnTap() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.boton1 {
  position: fixed;
  top: 20px;
  left: 3%;
  color: white;
  font-size: 20px;
  z-index: 99;
}
.boton2 {
  position: fixed;
  top: 20px;
  right: 3%;
  color: white;
  font-size: 20px;
  z-index: 99;
}
.input {
  height: 50px;
  width: 100%;
  text-align: center;
  line-height: 50px;
  position: relative;
  background: #ffffff;
}
.input_icon {
  position: absolute;
  left: 43%;
  top: 15px;
  font-size: 18px;
  color: #E3E3E3;
}
.inputAl::-webkit-input-placeholder {
  padding-left: 5%;
}
.inputAl {
  height: 35px;
  width: 96%;
  border: none;
  text-align: center;
  background:#eee;
}
.list{
    height: 60px;width: 94%;
    margin-left: 3%;
    display:flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.5px solid #eee;
}
.listLeft {
    width: 90%;
    display: flex;
    flex-direction: column;
}
.listIcon{
    font-size: 22px;
    color: #27C16A;
}
</style>